<template>
    <div>
        <el-form :model="form" label-width="auto" style="max-width: 600px">
            <el-form-item label="楼盘名称">
                <el-input v-model="form.name" />
            </el-form-item>
            <el-form-item label="详情">
                <!-- <el-input v-model="form.title" /> -->
                <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                    :mode="mode" />
                <Editor style="height: 500px; overflow-y: hidden;" v-model="form.title" :defaultConfig="editorConfig"
                    :mode="mode" @onCreated="handleCreated" />

            </el-form-item>
            <el-form-item label="价格">
                <el-input v-model="form.price" />
            </el-form-item>
            <el-form-item label="面积">
                <el-input v-model="form.size" />
            </el-form-item>
            <el-form-item label="图片">
                <el-input v-model="form.url" />
            </el-form-item>
            <el-form-item label="经纪人">
                <el-select v-model="form.person" placeholder="请选择经纪人">
                    <el-option label="李兰" value="李兰" />
                    <el-option label="黄明" value="黄明" />
                    <el-option label="昭武" value="昭武" />
                    <el-option label="李四" value="李四" />
                </el-select>
            </el-form-item>
            <el-form-item label="装修">
                <el-select v-model="form.level" placeholder="请选择装修">
                    <el-option label="毛坯" value="毛坯" />
                    <el-option label="简装" value="简装" />
                    <el-option label="精装" value="精装" />
                </el-select>
            </el-form-item>
            <el-form-item label="几居室">
                <el-select v-model="form.sizeRoom" placeholder="请选择几居室">
                    <el-option label="一居" value="一居" />
                    <el-option label="两居" value="两居" />
                    <el-option label="三居" value="三居" />
                </el-select>
            </el-form-item>
            <el-form-item label="是否出售">
                <el-select v-model="form.state" placeholder="是否出售">
                    <el-option label="已出售" value="1" />
                    <el-option label="未出售" value="2" />
                </el-select>
            </el-form-item>
            <el-form-item>
                <el-button>取消</el-button>
                <el-button type="primary" @click="onSubmit">确认</el-button>
            </el-form-item>
        </el-form>
    </div>
</template>
<script setup>

import { useRoute, useRouter } from 'vue-router';
import axios from 'axios';
import { ElMessage } from 'element-plus'
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted, reactive } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 获取地址栏参数信息
const route = useRoute()
const router = useRouter()

// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

const form = reactive({
    name: route.query.name,
    title: route.query.title,
    price: route.query.price,
    size: route.query.size,
    person: route.query.person,
    level: route.query.level,
    sizeRoom: route.query.sizeRoom,
    state: route.query.state,
    url: route.query.url,
    id: route.query.id
})

const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...' }

// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})

const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}

const onSubmit = () => {
    axios.post('/api/room/list', form).then(res => {
        ElMessage(res.data.message)
        router.push({
            path: '/propertymanage/houselist'
        })
    })
}

</script>